<template>
  <div class="container">
    <div class="box">
      <el-card :body-style="{ padding: '0px' }">
        <div style="width: 320px; height: 30px">
          <el-icon
            size="30"
            color="rgb(115.2, 117.6, 122.4)"
            style="cursor: pointer"
            @click="$router.push('/')"
            ><Back
          /></el-icon>
        </div>
        <div class="top">
          <img
            src="../assets/logo.png"
            alt=""
            style="width: 80px; height: 80px; border-radius: 50%"
          />
        </div>
        <div class="content">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-form
              :model="forgetPassword"
              style="width: 80%"
              :rules="forgetRules"
            >
              <!-- <el-icon><User /></el-icon> -->
              <el-form-item prop="name">
                <el-input
                  prefix-icon="User"
                  placeholder="请输入姓名"
                  v-model="forgetPassword.name"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item prop="phone">
                <el-input
                  placeholder="请输入手机号"
                  v-model="forgetPassword.phone"
                  prefix-icon="phone"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  prefix-icon="Lock"
                  :type="Flag ? 'text' : 'password'"
                  v-model="forgetPassword.password"
                  placeholder="请输入密码"
                  style="width: 240px"
                >
                  <template #suffix>
                    <el-icon
                      v-show="!Show"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        Show = !Show;
                        Flag = !Flag;
                      "
                      ><View
                    /></el-icon>
                    <el-icon
                      v-show="Show"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        Show = !Show;
                        Flag = !Flag;
                      "
                      ><Hide
                    /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="checkPassword">
                <el-input
                  prefix-icon="Lock"
                  v-model="forgetPassword.checkPassword"
                  :type="checkFlag ? 'text' : 'password'"
                  placeholder="请确认密码"
                  style="width: 240px"
                >
                  <template #suffix>
                    <el-icon
                      v-show="!checkShow"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        checkShow = !checkShow;
                        checkFlag = !checkFlag;
                      "
                      ><View
                    /></el-icon>
                    <el-icon
                      v-show="checkShow"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        checkShow = !checkShow;
                        checkFlag = !checkFlag;
                      "
                      ><Hide
                    /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-button
                  type="primary"
                  style="width: 150px; margin: 0 auto"
                  @click="submit"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
    
    <script setup>
// import { changePassword } from '@/api/changePassword';
import { forget } from "@/api/forgetPassword";
import router from "@/router";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const Show = ref(false);
const Flag = ref(false);
const checkShow = ref(false);
const checkFlag = ref(false);
// const user = JSON.parse(localStorage.getItem("user"))
const forgetPassword = ref({
  name: "",
  phone: "",
  password: "",
  checkPassword: "",
});
const validatorCheck = (rule, value, callback) => {
  if (value !== forgetPassword.value.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};
const forgetRules = ref({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[34578]\d{9}$/,
      message: "手机号格式不正确",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" },
  ],
  checkPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" },
    { validator: validatorCheck, trigger: "blur" },
  ],
});

const submit = async () => {
  // passwordData.value.userId = user.id
  const res = await forget(forgetPassword.value);
  console.log(res);
  if (res.code == 200) {
    // alert('修改密码成功')
    ElMessage({
      message: "修改密码成功",
      type: "success",
    });
    localStorage.removeItem("user");
    router.push("/");
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    });
  }
};
</script>
    
    <style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: grey;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 320px;
  height: 380px;
}
.box .el-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.top {
  width: 100%;
  height: 80px;
  /* border-radius: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10px; */
  /* margin-top: 50px; */
}
.content {
  /* width: 200px;
        height: 300px; */
  display: flex;
  justify-content: center;
  /* margin-top: 10px; */
  /* align-self: start; */
  align-items: center;
}
</style>